<!-- caoyong -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>-政府采购信息网</title>
    <meta name="description" content="描述">
    <meta name="keywords" content="关键词">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">

    <link rel="stylesheet/less" href="/web/public/public.less">
    <link rel="stylesheet/less" href="/web/css/article.less">
    <style type="text/less">
        @import "/web/public/public.less";
        .container{
            #main{
                .clearfix;
                width: 1024px;
                margin: 0 auto;
                min-height:60vh;
                .position{
                    margin-top: 25px;
                    margin-bottom: 16px;
                    font-size: 14px;
                    color: #7f7f7f;
                }

            }
        }
    </style>

    <script src="/web/lib/less.min.js"></script>
    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/public/public.js"></script>
</head>
<body>
<div class="container">
    <!--这里引入header-->
    <!--#include virtual="/web/html/header/header.htm"-->
    <div id="main">
        <!--#include virtual="/web/html/fragment/list-inc/special-top-ad.htm"-->
        <!-- ==================================资讯专题列表开始========================= -->
        <!-- caoyong -->
        <script src="/web/lib/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="/web/lib/BaseCyAxios.js"></script>
        <script src="/web/public/public.js"></script>
        <!--消息提示 -->
        <script src="/web/lib/jquery.growl.js" type="text/javascript"></script>
        <link href="/web/css/jquery.growl.css" rel="stylesheet" type="text/css" />
        <!--分页器 -->
        <link rel="stylesheet" href="/web/css/pagination.css">
        <script src="/web/lib/jquery.pagination.js"></script>
        <style type="text/less">@import "/web/public/public.less";
            #special-center-list {
                .position {
                    margin-top: 25px;
                    margin-bottom: 16px;
                    font-size: 14px;
                    color: #7f7f7f;
                }

                font-family: MicrosoftYaHei;
                width: 100%;

                .special-center-list_wrap {
                    width: 1040px; //20210111
                    margin-left: 0px; //20210111
                    display: flex;
                    flex-direction: column;

                    .special-center-list_box {
                        width: 100%;
                        /* min-height: 492px; */

                        ul {
                            list-style: none;

                            li {
                                margin-right: 15px; //20210111
                                display: inline;
                                height: 321px; //20210115
                                margin-bottom: 5px; //20210115
                                float: left;
                                width: 331px;
                                /* background-color: #ebebeb; */

                                img {
                                    width: 331px;
                                    height: 202px;
                                }

                                .special-9box_li_2 {
                                    min-height: 62px; //20210115
                                    .special-9box_li_2_1 {
                                        line-height: 46px;
                                        height: 46px;
                                        padding: 5px 9px 5px 9px;
                                        font-size: 14px;
                                        color: #7f7f7f;
                                        background-color: #f0f0f0;
                                        border-radius: 2px;
                                    }

                                    .special-9box_li_2_2 {
                                        margin-left: 12px;
                                        font-size: 16px;
                                        color: #333333;
                                    }
                                }

                                .special-9box_li_3 {
                                    width: 331px; //20210115
                                    line-height: 26px; //20210115
                                    height: 26px; //20210115
                                    overflow: hidden; // 隐藏//20210115
                                    /*white-space:nowrap;// 默认//20210115*!*/

                                    & > a { //20210115
                                        display: inline-block; //20210115
                                    }

                                    //20210115


                                    .special-9box_li_3_1 {
                                        font-size: 14px;
                                        color: #7f7f7f;
                                        margin-right: 1em;
                                    }

                                    .special-9box_li_3_2 {
                                        font-size: 14px;
                                        margin-right: 1em;
                                        color: #3563d5;
                                    }

                                    .special-9box_li_3_3 {
                                        padding: 2px 12px 2px 12px; //20210115
                                        margin-right: 1em;
                                        background-color: #f0f0f0;
                                        border-radius: 13px;
                                        font-size: 14px;
                                        color: #a8a8a8;
                                    }
                                }
                            }
                        }
                    }

                    .M-box2_wrap {
                        display: flex;
                        justify-content: center;

                        .M-box2 {
                            margin-top: 40px;

                            .prev {
                                width: 79px;
                                height: 36px;
                                border-radius: 4px;
                                border: solid 1px #ebebeb;
                                font-family: AlibabaPuHuiTiR;
                                font-size: 14px;
                                color: #252627;
                                font-weight: normal;
                            }

                            .next {
                                width: 79px;
                                height: 36px;
                                border-radius: 4px;
                                border: solid 1px #ebebeb;
                                font-family: AlibabaPuHuiTiR;
                                font-size: 14px;
                                color: #252627;
                                font-weight: normal;
                            }

                            .active {
                                border-radius: 4px;
                                border: 1px solid #f0f0f0;
                                background: #f0f0f0;
                                font-family: AlibabaPuHuiTiR;
                                font-size: 14px;
                                color: #7f7f7f;
                            }

                            a {
                                border-radius: 4px;
                                border: solid 1px #ebebeb;
                                font-family: AlibabaPuHuiTiR;
                                font-size: 14px;
                                color: #888888;
                            }

                            a:hover {
                                color: #7f7f7f;
                                background: #f0f0f0;
                            }
                        }
                    }
                }
            }
            /* 弹窗位置 */
            #growls.default {
                top: 100px !important;
                left: calc(~"50% - 125px") !important;
            }
        </style>
        <script src="/web/lib/less.min.js"></script>
        <div class="position">
            首页 -> 专题
        </div>

        <div id="special-center-list">
            <div class="special-center-list_wrap">
                <div class="special-center-list_box"><!--20210115-->
                    <ul id='id_special_ul'><!--20210115-->
                    </ul><!--20210115-->
                </div>
                <div class="M-box2_wrap">
                    <div class="m-style M-box2"></div>
                </div>
            </div>
        </div>
            <script>
                $(function() {
                    var $pagination = '';
                    var $pageIndex = 1;
                    var $pageSize = 9;
                    $('.M-box2').pagination({
                        current: $pageIndex,
                        showData: $pageSize,
                        coping: true,
                        homePage: '',
                        endPage: '',
                        prevCls: 'prev',
                        nextCls: 'next',
                        activeCls: 'active',
                        prevContent: '<上页',
                        nextContent: '下页>',
                        pageCount: 0,
                        callback: function(api) {
                            console.log(api.getCurrent(), api);
                            $pageIndex = api.getCurrent();
                            loadSpecialArticleList();
                        }
                    }, function(api) {
                        $pagination = api;
                        console.log($pagination, $pagination.getCurrent());
                        // $pagination.setPageCount(80);
                        // $pagination.filling($pageIndex);
                    });


                    //更新页面宫格数据
                    var $id_special_ul = $('#id_special_ul')[0];
                    // console.log($id_special_ul);
                    var setUlByItem = function(items, ifClean) {
                        var bufHtml = ""; // 声明一个空字符串容器
                        for (var k of items) { // 循环遍历数组 拼接li标签部分和字符串内容
                            bufHtml +=
                                '            <li>' +
                                '              <a href="' + (k.articleOutLinkStatus==0?k.articleUrl:k.articleOutLink) + '" target="_blank">' +
                                '                <img src="' + k.articleTitleImage + '" alt="' + k.articleTitleImageAlt + '"></img>' +
                                '              </a>' +
                                '              <div class="special-9box_li_2">' +
                                '                <span class="special-9box_li_2_1">专题</span>' +
                                '                <a href="' + (k.articleOutLinkStatus==0?k.articleUrl:k.articleOutLink) + '" target="_blank">' +
                                '                  <span class="special-9box_li_2_2">' + k.articleTitle + '</span>' +
                                '                </a>' +
                                '              </div>' +
                                '              <div class="special-9box_li_3">' +
                                '	             <span class="special-9box_li_3_1">' + k.updateTime.split(' ')[0] + '</span>' +
                                '	             <a  href="' + k.channelUrl + '" class="special-9box_li_3_2" target="_blank">' + k.channelName + '</a>' +
                                getSpanHtml(k.articleKeywordList) +
                                '              </div>' +
                                '            </li>';
                        }
                        if (ifClean) {
                            $id_special_ul.innerHTML = bufHtml;
                        } else {
                            $id_special_ul.innerHTML = $id_special_ul.innerHTML + bufHtml;
                        }

                    }
                    var getSpanHtml = function(item) {
                        var bufHtml = '';
                        // console.log('item',item);
                        for (var k of item) {
                            bufHtml +=
                                '            <a href="' + k.staticAddress + '" target="_blank">' +
                                '              <span class="special-9box_li_3_3">' + k.keyword + '</span>' +
                                '            </a>';
                        }
                        return bufHtml;

                    }
                    //联网获取一页数据
                    var loadSpecialArticleList = function() {
                        //联网操作
                        var callback = function(status, obj) {
                            console.log("status=" + status, obj);
                            // console.log(obj);
                            if (status == "ok") {
                                // noticeMsgShow(obj.message, 0); //0绿 1黄2红
                                $pagination.setPageCount(obj.data.pages);
                                $pagination.filling($pageIndex);
                                setUlByItem(obj.data.list, true);

                            } else {
                                noticeMsgShow(obj.message, 2); //0绿 1黄2红
                            }
                        };
                        var parameter = {
                            page: $pageIndex,
                            size: $pageSize,
                        }
                        myAjaxXf("front_article_loadSpecialArticleList", parameter, callback);
                    }
                    loadSpecialArticleList();

                });
            </script>
            <!-- ===============================资讯专题列表结束==================================== -->
        </div>
    <!--#include virtual="/web/html/footer/footer.htm"-->
</div>
<script>
    $.ajax({
        url:ports.getTagListTdk,
        data: {
            plateIds: 101
        },
        success:function (res) {
            console.log('获取标签列表tdk',res);
            $("title").text(res.data.channelTitle+'-政府采购信息网'||'政府采购信息网');
            $("meta[name='keywords']").prop('content',res.data.channelKeyword||'');
            $("meta[name='description']").prop('content',res.data.channelDescriptions||'');
        }
    })
</script>
</body>
</html>